<!-- 编辑会员资料 -->
<template>
  <div class=''>
    <el-form ref="memberDataForm"
             :model="memberDataForm"
             :rules="memberDataRule"
             :inline="true"
             size="mini"
             label-width="75px"
             label-position="top">
      <el-row :gutter="10">
        <el-col :span="19">
          <el-form-item label="姓名"
                        prop="name">
            <el-input v-model="memberDataForm.name"
                      placeholder="姓名"
                      style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="年龄"
                        prop="age">
            <el-input v-model="memberDataForm.age"
                      placeholder="年龄"
                      maxlength="3"
                      style="width: 80px;"></el-input>
          </el-form-item>

          <el-form-item label="性别"
                        prop="sex">
            <template>
              <el-radio-group v-model="memberDataForm.sex">
                <el-radio-button :label="1">男</el-radio-button>
                <el-radio-button :label="0">女</el-radio-button>
              </el-radio-group>
            </template>
          </el-form-item>
          <el-form-item label="身份证号"
                        prop="idcard">
            <!-- show-word-limit -->
            <el-input v-model="memberDataForm.idcard"
                      placeholder="身份证号"
                      maxlength="18"
                      :disabled="idcardDisabled"
                      style="width: 200px"></el-input>
          </el-form-item>

          <el-form-item label="联系电话"
                        prop="telphone">
            <!-- show-word-limit -->
            <el-input v-model="memberDataForm.telphone"
                      placeholder="联系电话"
                      maxlength="11"
                      style="width:140px"></el-input>
          </el-form-item>

          <el-form-item label="籍贯"
                        prop="hometownVal">
            <!--<el-select v-model="memberDataForm.hometown"
                       style="width: 110px">
              <el-option v-for="item in selectOps.hometown"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>-->
            <el-input v-model="memberDataForm.hometownVal"
                      placeholder="输入地名、祖籍"></el-input>
          </el-form-item>

          <el-form-item label="出生日期"
                        prop="birthday">
            <el-date-picker v-model="memberDataForm.birthday"
                            type="date"
                            placeholder="选择日期"
                            style="width: 140px;"></el-date-picker>
          </el-form-item>
          <el-form-item label="职业"
                        prop="job">
            <el-input v-model="memberDataForm.job"
                      placeholder="职业"
                      style="width:140px"></el-input>
          </el-form-item>
          <el-form-item label="兴趣爱好"
                        prop="hobby">
            <el-input v-model="memberDataForm.hobby"
                      placeholder="兴趣爱好"
                      style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="健康状况"
                        prop="health">
            <el-input v-model="memberDataForm.health"
                      placeholder="健康状况"
                      style="width: 150px"></el-input>
          </el-form-item>

          <el-form-item label="地区"
                        prop="districtArr">
            <el-cascader id="el-cascader"
                         :options="districts"
                         :props="districtProps"
                         v-model="memberDataForm.districtArr"
                         placeholder="请选择地区"
                         @change="handleChange"
                         clearable
                         style="width: 220px"></el-cascader>
          </el-form-item>

          <el-form-item label="居住地址"
                        prop="address">
            <el-input v-model="memberDataForm.address"
                      placeholder="居住地址"
                      style="width: 220px"></el-input>
          </el-form-item>

          <el-form-item label="学历"
                        prop="education">
            <el-select v-model="memberDataForm.education"
                       style="width: 140px">
              <el-option v-for="item in selectOps.education"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="有无保险"
                        prop="insurance">
            <el-select v-model="memberDataForm.insurance"
                       style="width: 100px;">
              <el-option v-for="item in selectOps.insurance"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="婚姻状况"
                        prop="marriage"
                        style="width: 100px;">
            <el-select v-model="memberDataForm.marriage">
              <el-option v-for="item in selectOps.marriage"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="居住情况"
                        prop="reside">
            <el-select v-model="memberDataForm.reside"
                       style="width: 130px;">
              <el-option v-for="item in selectOps.reside"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <singleUpload2 v-model="memberDataForm.avatar"></singleUpload2>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button size="small"
                     type="primary"
                     @click="memberDataFormSubmit"
                     v-if="isAuth('member:member:info-update')">更新会员资料</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import singleUpload2 from '@/components/upload/singleUpload2'
// eslint-disable-next-line no-unused-vars
import { padRemove, pad } from '@/utils'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    singleUpload2
  },
  props: {
    memberId: Number
  },
  data () {
    // 这里存放数据
    return {
      imageUrl: 'http://localhost:88/api/member/upload/20201013/default.png',
      //
      // idcardVisible: false,
      // dialogVisible: false,
      // idcardValidMsg: '无效身份证号码',
      idcardDisabled: false,
      // 头像文件名
      avatarUrl: '',

      // value: [],
      districts: [],  // 地区数组
      // 级连下拉框可选项设置
      districtProps: {
        label: 'name',  // 显示的值
        value: 'code',  // 选择的值
        children: 'children'  // 子节点
      },

      selectOps: {
        sex: [
          { id: 1, name: '男' },
          { id: 0, name: '女' }
        ],
        // 学历
        education: [
          { id: 1, name: '文盲' },
          { id: 2, name: '小学' },
          { id: 3, name: '初中' },
          { id: 4, name: '高中/技校/中专' },
          { id: 5, name: '大学专科以上' },
          { id: 6, name: '不详' }
        ],
        // 有无保险
        insurance: [
          { id: 1, name: '有' },
          { id: 0, name: '无' }
        ],
        // 婚姻状况
        marriage: [
          { id: 1, name: '未婚' },
          { id: 2, name: '已婚' },
          { id: 3, name: '丧偶' },
          { id: 4, name: '离婚' },
          { id: 5, name: '未知' }
        ],
        // 居住情况
        reside: [
          { id: 1, name: '独居' },
          { id: 2, name: '与子女居住' },
          { id: 3, name: '夫妻同居' },
          { id: 4, name: '不详' }
        ],
        // 籍贯
        hometown: [
          { id: 1, name: '汉族' },
          { id: 2, name: '少数民族' }
        ]
      },
      memberDataForm: {
        id: this.id,
        name: '',
        age: '',
        sex: '',
        avatar: '',
        telphone: '',
        idcard: '',
        birthday: '',
        address: '',
        hometown: '',
        hometownVal: '',
        job: '',
        education: '',
        insurance: '',
        hobby: '',
        health: '',
        marriage: '',
        reside: '',
        provincecode: '',
        citycode: '',
        areacode: '',
        districtArr: []
      },
      memberDataRule: {
        name: [{ required: false, message: '姓名不能为空', trigger: 'blur' }],
        age: [{ required: false, message: '年龄不能为空', trigger: 'blur' }],
        sex: [{ required: false, message: '性别不能为空', trigger: 'blur' }],
        avatar: [{ required: false, message: '头像不能为空', trigger: 'blur' }],
        telphone: [{ required: false, message: '联系电话不能为空', trigger: 'blur' }],
        idcard: [{ required: false, message: '身份证号不能为空', trigger: 'blur' }],
        birthday: [{ required: false, message: '出生日期不能为空', trigger: 'blur' }],
        address: [{ required: false, message: '居住地址不能为空', trigger: 'blur' }],
        hometown: [{ required: false, message: '籍贯不能为空', trigger: 'blur' }],
        job: [{ required: false, message: '职业不能为空', trigger: 'blur' }],
        education: [{ required: false, message: '学历不能为空', trigger: 'blur' }],
        insurance: [{ required: false, message: '有无保险不能为空', trigger: 'blur' }],
        hobby: [{ required: false, message: '兴趣爱好不能为空', trigger: 'blur' }],
        health: [{ required: false, message: '健康状况不能为空', trigger: 'blur' }],
        marriage: [{ required: false, message: '婚姻状况不能为空', trigger: 'blur' }],
        reside: [{ required: false, message: '居住情况不能为空', trigger: 'blur' }],
        provicecode: [{ required: false, message: '省份编码不能为空', trigger: 'blur' }],
        citycode: [{ required: false, message: '城市编码不能为空', trigger: 'blur' }],
        areacode: [{ required: false, message: '区域编码不能为空', trigger: 'blur' }]
      }

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    'memberDataForm.avatar' (newVal, oldVal) {
      if (newVal) {
        let spl = newVal.split('/')
        if (spl.length > 2) {
          this.avatarUrl = spl[spl.length - 2] + '/' + spl[spl.length - 1]
        }
      }
      // console.log(`avatar.new:${newVal}, avatar.old:${oldVal}`)
    }
  },
  // 方法集合
  methods: {
    init (id) {
      this.$nextTick(() => {
        this.memberDataForm.id = id || 0
        // 重置表单字段
        this.$refs['memberDataForm'].resetFields()
        // console.log(`edit.init.id=${id}`)
        if (this.memberDataForm.id) {
          // 根据会员资料ID查询
          this.$http({
            url: this.$http.adornUrl(`/member/member/info/${this.memberDataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              // console.log(data.member)
              this.memberDataForm.name = data.member.name
              this.memberDataForm.age = data.member.age
              this.memberDataForm.sex = data.member.sex
              this.memberDataForm.avatar = data.member.avatar
              this.memberDataForm.telphone = data.member.telphone
              this.memberDataForm.idcard = data.member.idcard
              this.memberDataForm.birthday = new Date(data.member.birthday * 1000)
              this.memberDataForm.address = data.member.address
              this.memberDataForm.hometown = data.member.hometown
              this.memberDataForm.hometownVal = data.member.hometownVal
              this.memberDataForm.job = data.member.job
              this.memberDataForm.education = data.member.education
              this.memberDataForm.insurance = data.member.insurance
              this.memberDataForm.hobby = data.member.hobby
              this.memberDataForm.health = data.member.health
              this.memberDataForm.marriage = data.member.marriage
              this.memberDataForm.reside = data.member.reside
              this.memberDataForm.provincecode = data.member.provincecode
              this.memberDataForm.citycode = data.member.citycode
              this.memberDataForm.areacode = data.member.areacode
              let district = []
              district.push(padRemove(data.member.provincecode))
              district.push(padRemove(data.member.citycode))
              district.push(padRemove(data.member.areacode))
              this.memberDataForm.districtArr = district
              // console.log(this.memberDataForm)
            }
          })
        }
      })
    },
    // 获取地区数据
    getDistricts () {
      this.$http({
        url: this.$http.adornUrl(`/member/cnprovince/districts`),
        method: 'get'
      }).then(({ data }) => {
        if (data.code === 0) {
          this.districts = data.data.districts
        }
      })
    },
    // 地区级连发生改变时调用
    handleChange () {
      // console.log(this.dataForm.districtArr)
    },
    // 会员资料表单提交
    memberDataFormSubmit () {
      this.$refs['memberDataForm'].validate((valid) => {
        if (valid) {
          // console.log(this.memberDataForm)
          let params = {
            id: this.memberDataForm.id || undefined,
            name: this.memberDataForm.name,
            age: this.memberDataForm.age,
            sex: this.memberDataForm.sex,
            avatar: this.avatarUrl || this.memberDataForm.avatar,
            telphone: this.memberDataForm.telphone,
            idcard: this.memberDataForm.idcard,
            birthday: this.memberDataForm.birthday.getTime() / 1000,
            address: this.memberDataForm.address,
            hometown: this.memberDataForm.hometown,
            job: this.memberDataForm.job,
            education: this.memberDataForm.education,
            insurance: this.memberDataForm.insurance,
            hobby: this.memberDataForm.hobby,
            health: this.memberDataForm.health,
            marriage: this.memberDataForm.marriage,
            reside: this.memberDataForm.reside,
            provincecode: this.memberDataForm.districtArr.length === 3 ? pad(this.memberDataForm.districtArr[0], 6) : '',
            citycode: this.memberDataForm.districtArr.length === 3 ? pad(this.memberDataForm.districtArr[1], 6) : '',
            areacode: this.memberDataForm.districtArr.length === 3 ? pad(this.memberDataForm.districtArr[2], 6) : '',
            updatedBy: this.$store.state.user.name
          }
          // console.log(params)

          this.$http({
            url: this.$http.adornUrl(`/member/member/update`),
            method: 'post',
            data: params
          }).then(({ data }) => {
            // console.log(data)
            if (data && data.code === 0) {
              for (var item in this.memberDataForm) {
                if (item === 'districtArr') {
                  this.memberDataForm[item] = []
                } else {
                  this.memberDataForm[item] = null
                }
              }
              this.$message({
                message: '资料更新成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  // 隐藏弹出窗体
                  this.$emit('setVisible', false)
                  // 刷新列表
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getDistricts()
  }
}
</script>
<style scoped>
.el-radio-group {
  display: block;
}
</style>